<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/static/component/layui/css/layui.css" media="all">
    <th:block th:include="include :: header('预约管理表新增')"/>
</head>
<body>
<form class="layui-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">

                <div class="layui-form-item">
                    <label class="layui-form-label" type="reset">顾客姓名</label>
                    <div class="layui-input-block" >
                        <input type="text" name="customerName" autocomplete="off" placeholder="顾客姓名" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">顾客电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="customerTel" autocomplete="off" placeholder="顾客联系方式" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">预约项目</label>
                    <div class="layui-input-block" id="tag_ids" name="oProj">
                        <!--                        <input type="text" name="oProj" autocomplete="off" placeholder="预约项目" class="layui-input">-->
                        <!--                        <select name="oProj"  lay-verify="">-->
                        <!--                            <option value="">请选择一个服务项目</option>-->
                        <!--                            <option value="发型师">发型师</option>-->
                        <!--                            <option value="助手">助手</option>-->
                        <!--                        </select>-->
                        <!--                        <div class="layui-input-block" id="tag_ids">-->
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">发型师姓名</label>
                    <div class="layui-input-block" >
                        <!--                        <input type="text" name="hName" autocomplete="off" placeholder="发型师姓名" class="layui-input">-->

                        <select name="hName"  lay-verify="" id="hairl">
                            <!--                            <option value="">请选择一个发型师</option>-->
                            <!--                            <option value="发型师">发型师</option>-->
                            <!--                            <option value="助手">助手</option>-->
                        </select>
                    </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">发型师助理</label>
                    <div class="layui-input-block">
                        <!--                        <input type="text" name="hAss" autocomplete="off" placeholder="发型师助理" class="layui-input">-->

                        <select name="hAss"  lay-verify="" id="assl">
                            <!--                            <option value="">请选择一个助理</option>-->
                            <!--                            <option value="发型师">发型师</option>-->
                            <!--                            <option value="助手">助手</option>-->
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input id="tests" type="text" name="customerTime" autocomplete="off" placeholder="预约时间" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input id="teste" type="text" name="eTime" autocomplete="off" placeholder="结束时间" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">单据状态</label>
                    <div class="layui-input-block">
                        <select name="rState"  lay-verify="" >
                                <option value="已预约">已预约</option>
                                <option value="挂账中">挂账中</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="orderlist-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>
<script src="/static/component/layui/layui.js"></script>
<!--<script charset="UTF-8" src="/static/component/layui_extends/selectN.js"></script>-->
<script charset="UTF-8" src="/static/component/layui_extends/selectM.js"></script>
<script>

    var hairstylist = new Array();
    var asslist = new Array();
    // var prolist = new Array();

    //服务项目的下拉框选项
    var tagData = [

        // , {"id": 16, "name": "红泪沙", "status": 0}

    ];



    layui.use(['form','layer'], function(){
        var form = layui.form;
        var $ = layui.jquery, layer = layui.layer;
        let MODULE_PATH = rootPath+"/HairstylistController";

        $(document).ready(function(){ //页面第一次加载获取
            //发送请求，获取现有发型师和助手
            $.ajax({
                url: MODULE_PATH+'/list',
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'get',
                success: function (result) {
                    if (result.code==0) {
                        console.log(result.data);
                        console.log($(result.data).length);
                        let i = 0;
                        while (i < $(result.data).length) {
                            if(result.data[i].hPosition=="发型师"){
                                hairstylist.push(result.data[i].hName);
                                // console.log("放进去");
                                i++;
                            }else{
                                asslist.push(result.data[i].hName);
                                i++;
                            }
                        }
                        console.log(hairstylist);
                        console.log(asslist);

                        console.log("给下拉框赋值1")
                        var parknamesass = [];
                        var parknames = [];

                        //下拉矿默认值
                        var m = 0, len = $(hairstylist).length;
                        parknames.push('<option value="">请选择一个发型师</option>')
                        for (; m < len; m++) {
                            console.log("给下拉框赋值2")
                            console.log(hairstylist[m]);
                            //拼接成多个<option></option>
                            parknames.push('<option value="' + hairstylist[m] + '">' + hairstylist[m] + '</option>')
                            console.log(parknames);

                        }

                        var n = 0, len = $(asslist).length;
                        parknamesass.push('<option value="">请选择一个助手</option>')
                        for (;n < len; n++) {
                            console.log("给下拉框赋值2")
                            console.log(asslist[n]);
                            //拼接成多个<option></option>
                            parknamesass.push('<option value="' + asslist[n] + '">' + asslist[n] + '</option>')
                            console.log(parknamesass);

                        }
                        //根据parkID(根据你自己的select的ID写)填充到select标签中
                        $("#hairl").html(parknames.join(''));//发型师选项更新
                        $("#assl").html(parknamesass.join(''));//助手选项跟新
                        form.render();
                    }else {
                        // layer.msg(result.msg, {icon: 2, time: 1000});
                        window.location.reload()//刷新当前页面
                    }
                }
            });


        })

    });



    layui.config({
        base: './'
    }).extend({
        // selectN: './layui_extends/selectN',
        selectM: './layui_extends/selectM',
    }).use(['layer', 'form', 'jquery','selectM'], function() {
        $ = layui.jquery;
        var form = layui.form;
        //获取服务项目
        $.ajax({
            url: rootPath+'/ProductController/list',
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded',
            type: 'get',
            success: function (result) {
                if (result.code==0) {
                    console.log(result.data);
                    console.log($(result.data).length);
                    let i=0;
                    while(i<$(result.data).length){
                        // prolist.push(result.data[i].productName);
                        // console.log("放进去");
                        // console.log(prolist[i]);
                        // tagData[i].id=result.data[i].productName
                        console.log(result.data)
                        tagData.push({id:result.data[i].productName,name:result.data[i].productName});
                        var obj ={"id":"待定", "name": "待定"};
                        var id = result.data[i].productName;
                        var name=result.data[i].productName;
                        obj.id=id;
                        obj.name=name;
                        tagData = Object.assign(tagData, obj);
                        i++;
                    }
                    console.log("打印tagdata");
                    // console.log(tagData[0]);
                    console.log(tagData);

                } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                }
            }

        });

        // var selectN = layui.selectN;
        var selectM = layui.selectM;
        //多选标签-所有配置
        // form.render();

        setTimeout(function(){
            var tagIns = createSelectM("#tag_ids",tagData,"oProj",[]);
            form.render();},"200");
        let MODULE_PATH = rootPath+"/OrderlistController";

        form.on('submit(orderlist-save)', function (data) {
            //console.log(tagData);
            //console.log('tagIns 当前选中的名：', tagIns.names);
            var formData = data.field;
            console.log('表单对象：', formData);

            $.ajax({
                url: MODULE_PATH+'/add',
                data: data.field,
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'post',
                success: function (result) {
                    if (result.code==200) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("orderlist-table");
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

        $('.set1').click(function() {
            tagIns.set([6, 18]);
        });
        //通过js动态选择
        $('.set2').click(function() {
            tagIns.set([12, 13, 14, 15]);
        });
        /**
         * 创建多选下拉框
         * @param domId
         * @param data
         * @param inputName
         * @param selected
         * @param isRequired
         * @returns {*}
         */
        function createSelectM(domId, data, inputName, selected=[],isRequired=true) {
            var options = {
                //元素容器【必填】
                elem: domId
                //候选数据【必填】
                , data: data
                //默认选中的值
                , selected: selected
                //最多选中个数，默认5
                , max: data.length
                //input的name 不设置与选择器相同(去#.)
                , name: inputName
                //值的分隔符
                , delimiter: ','
                //候选项数据的键名
                , field: {idName: 'id', titleName: 'name'}
            };
            if(isRequired==true){
                // options = Object.assign({verify: 'required'}, options);
                options.verify='required';
            }

            return selectM(options);


        }

    });


    layui.use('laydate', function(){//日历组件
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#tests'
            ,type:'datetime'
            ,theme: 'molv'//墨绿色主题
            ,trigger: 'click' //采用click弹出
        });
    });
    layui.use('laydate', function(){//日历组件
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#teste'
            ,type:'datetime'
            ,theme: 'molv'//墨绿色主题
            ,trigger: 'click' //采用click弹出
        });
    });

    // layui.use(['form','laydate','jquery'], function () {
    //     let form = layui.form;
    //     let $ = layui.jquery;
    // let MODULE_PATH = rootPath+"/OrderlistController";
    //保存
    // form.on('submit(orderlist-save)', function (data) {
    //
    //     $.ajax({
    //         url: MODULE_PATH+'/add',
    //         data: data.field,
    //         dataType: 'json',
    //         contentType: 'application/x-www-form-urlencoded',
    //         type: 'post',
    //         success: function (result) {
    //             if (result.code==200) {
    //                 layer.msg(result.msg, {icon: 1, time: 1000}, function () {
    //                     parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
    //                     parent.layui.table.reload("orderlist-table");
    //                 });
    //             } else {
    //                 layer.msg(result.msg, {icon: 2, time: 1000});
    //             }
    //         }
    //     })
    //     return false;
    // });

</script>
</body>
</html>